<template>
  <div class="app-container">
      <!-- <el-input type="text" v-model="param.classGrade" placeholder="请输入查询节点"/>
      <el-button @click="getgraph">查询</el-button> -->

    <div id="graph" style="width:100%;height:1200px;margin-right:auto;"></div>
    <div :class="{'sidebar': true, 'collapsed': isCollapsed}">
    <button @click="toggleSidebar" class="toggle-btn">切换</button>
    <h3>节点信息</h3>
    <p v-if="selectedNode">节点名称: {{ selectedNode.data.name }}<br>
          <q v-if="selectedNode.data.dataType === 0">
            数据类型：图片<br>
            发布机构：{{selectedNode.data.publisher}}<br>
            图片链接：<a :href="selectedNode.data.localPath + '.'+selectedNode.data.fileFormat">{{`${selectedNode.data.localPath}.${selectedNode.data.fileFormat}`}}</a>
            文章链接：<a :href="selectedNode.data.articleurl">{{selectedNode.data.articleUrl}}</a><br>
            文件大小：{{selectedNode.data.size}}<br>
          </q>
          <q v-else-if="selectedNode.data.dataType === 1">
            数据类型：视频<br>
            发布机构：{{selectedNode.data.publisher}}<br>
            图片链接：<a :href="selectedNode.data.localPath + '.'+selectedNode.data.fileFormat">{{`${selectedNode.data.localPath}.${selectedNode.data.fileFormat}`}}</a>
            文章链接：<a :href="selectedNode.data.articleurl">{{selectedNode.data.articleUrl}}</a><br>
            时长：{{selectedNode.data.lastTime}}<br>
            文件大小：{{selectedNode.data.size}}<br>
          </q>
          <q v-else-if="selectedNode.data.dataType === 2">
            数据类型：音频
            发布机构：{{selectedNode.data.publisher}}<br>
            图片链接：<a :href="selectedNode.data.localPath + '.'+selectedNode.data.fileFormat">{{`${selectedNode.data.localPath}.${selectedNode.data.fileFormat}`}}</a>
            文章链接：<a :href="selectedNode.data.articleurl">{{selectedNode.data.articleUrl}}</a><br>
            时长：{{selectedNode.data.lastTime}}<br>
            文件大小：{{selectedNode.data.size}}<br>
          </q>
          <q v-else-if="selectedNode.data.dataType === 3">
            数据类型：文章<br>
            原始标题：{{selectedNode.data.titleOrg}}<br>
            中文标题：{{selectedNode.data.titleCN}}<br>
            发布机构：{{selectedNode.data.publisher}}<br>
            原始摘要：{{selectedNode.data.summaryOrg}}<br>
            中文摘要：{{selectedNode.data.summaryCN}}<br>
            原始全文：{{selectedNode.data.contentsOrg}}<br>
            中文全文：{{selectedNode.data.contentsCN}}<br>
            文章链接：<a :href="selectedNode.data.articleurl">{{selectedNode.data.articleUrl}}</a><br>
            文件格式：{{selectedNode.data.fileFormat}}<br>
          </q>
            <!-- 文章链接：<
              a :href="selectedNode.data.articleurl">{{selectedNode.data.articleurl}}</a><br>
            图片链接：<a :href="selectedNode.data.localPath + '.'+selectedNode.data.fileFormat">{{`${selectedNode.data.localPath}.${selectedNode.data.fileFormat}`}}</a> -->

    
    </p>
    <p v-else>点击节点查看详情</p>
  </div>
  </div>
</template>
<style>
  .sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background: white;
    border-left: 1px solid #ccc;
    padding: 20px;
    transition: transform 0.3s ease;
  }
  
  .collapsed {
    transform: translateX(100%);  /* 完全隐藏在视图外 */
  }
  .toggle-btn {
    position: absolute;
    left: -50px; /* 将按钮放置在侧边栏的左侧外部 */
    top: 50%;
    transform: translateY(-50%);
    width: 50px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    cursor: pointer;
  }
  /* button {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  } */
  </style>
<script>
//   import { xxxx } from "@/api/information/article";
import * as echarts from "echarts/lib/echarts"
import "echarts/lib/chart/graph"
import { getNeo4jTest } from "@/api/spmmkg/sciencePopMmkg";
import { listMultimodal_file,getMultimodal_file} from "@/api/information/multimodal_file";
export default {
  name: "XXX",
  data() {        
    return {
      graph: "",
      myChart: null,
      loading:true,
      param:{
        classGrade:"test"
      },
      MMparam:{

      },
      NodeList:[],
      total:0,
      selectedNode: null,
      isCollapsed: false,
      pointData:[],
      linkData:[],
      // categoryData:[],
      options:{
        title:{
          text:"知识图谱"
        },
        series:[
        {
          name:"知识图谱",
          type:"graph",
          layout: "force",
          force: {
            repulsion: 6000,
            gravity: 0.1,
            edgeLength: 50,
            layoutAnimation: true
          },
          data: [],
          links: [],
          // categories: [],
          roam: false,
          symbol: 'circle',
          symbolSize: 40,
          cursor: 'pointer',
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: "{b}",
              fontSize: 16,
              fontStyle: "600"
            }
          },
          lineStyle: {
            normal: {
              opacity: 0.9,
              width: 1.5,
              curveness: 0
            }
          }
        }
        ],
      
    }
    };
  },
  created() {

  },
  mounted(){
  // this.getgraph();
    this.getMMData();
  },
  methods: {
    //从后端获取neo4j数据
    getgraph(){
      // this.loading = true;
      getNeo4jTest(this.param).then(response=>{
        this.NodeList = response;
        this.total = response.length;
        this.setPointData(this.NodeList);
        this.initgraph();
        // this.loading = false;
      });
    },
    initgraph(){
      this.graph = echarts.init(document.getElementById("graph"));
      this.options.series[0].data = this.pointData;
      this.options.series[0].links = this.linkData;
      this.graph.setOption(this.options);
      console.log(this.graph)
  this.graph.on('click',(params) =>{
    if(params.dataType === 'node'){
      this.selectedNode = params.data;
    }
  });
    },
    //获取多模态数据
    getMMData(){
      listMultimodal_file(this.MMparam).then(response=>{
        console.log(response);
        this.NodeList = response.rows.slice(0,100);
        // console.log(this.NodeList);
        this.total = 100;
        this.setPointData(this.NodeList);
        this.initgraph();
      });
    },
    setPointData(list) { 
    list.forEach((name, index) => {
      const imageurl = `http://miniodb.gbtux.cn:8089/science-pop-resource/2024-05/22/953193509396025344.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=pawfYTeZwMug0qda4G0J%2F20240522%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240522T093917Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=9a4512d5e16135e62ccf86ebb64173e7aee6e9fd8f49cb10201676891ba0f8f6.jpg`;
      // const imageurl = `https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png`
      // console.log(imageurl);
      this.pointData.push({
        x: index * 50,
        y: 20 + index * 50,
        // name,
        // category,
        draggable: true,
        data:list[index],
        // symbol: `image://${imageurl}`,
        // symbolSize:100,
      });
    });
  },
  setLinkData(list, target) {
    list.forEach(source => {
      this.linkData.push({
        source,
        target,
        lineStyle: {
          normal: {
            color: "source"
          }
        }
      });
    });
  },
  toggleSidebar(){
    this.isCollapsed = !this.isCollapsed;
  },
  setCategoryData(list) {
    list.forEach(name => {
      this.categoryData.push({ name });
    });
  }
  }
};
</script>
